<template>
  <!--1.首先，弹窗页面中要有el-dialog组件即弹窗组件，我们把弹窗中的内容放在el-dialog组件中-->
  <!--2.设置:visible.sync属性，动态绑定一个布尔值，通过这个属性来控制弹窗是否弹出-->
  <el-dialog title="导出" :visible.sync="outVisible" width="50%">
    <div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div class="bcolor1"><u>导出模板文件</u>

            </div>
            <br>
            <el-row style="position: relative;left: 170px;">

              <el-button type="success">Excel导出</el-button>


            </el-row>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div class="bcolor2"><u>导出当前页</u></div>
            <br>
            <el-row style="position: relative;left: 170px;">

              <el-button type="success">Excel导出</el-button>


            </el-row>
          </div>
        </el-col>

      </el-row>


    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'employOut',
  data () {
    return {
      outVisible: false
    }
  },
  methods: {
    // 3.定义一个init函数，通过设置detailVisible值为true来让弹窗弹出，这个函数会在父组件的方法中被调用
    inittt (dataaa) {
      this.outVisible = true
      // data是父组件弹窗传递过来的值，我们可以打印看看
      console.log(dataaa)
    }
  }
}
</script>
<style>
.bcolor1 {
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  border-right: darkcyan dashed 2px;
}

.bcolor1:active {
  color: blue;
}

.bcolor1:focus {
  color: brown;
}

.bcolor2 {
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.bcolor2:active {
  color: blue;
}

.bcolor2:focus {
  color: brown;
}

.el-row {
  margin-bottom: 20px;

&
:last-child {
  margin-bottom: 0;
}

}
.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: white;
}

.bg-purple {
  background: white;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
